import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { Table, Tag, Space, Button, Form, Input, Modal, Select, message } from 'antd';
import { useApi } from '@/hooks/useApi';
import { fetchList, CategoryProps, addCategory, updateCategory } from '@/api/apiCategory';
import { fetchList as getTables } from '@/api/table'

const { Option } = Select;
const { Column } = Table;

const ApiCategory: React.FC = () => {
    const [key, setKey] = useState<number>(0);
    const navigate = useNavigate();
    const [data, setData] = useApi(fetchList, key);
    const [show, setShow] = useState<boolean>(false);
    // 缓存编辑数据
    const [categoryId, setCategoryId] = useState<string | null>(null);
    // 获取所有表
    const [tableList,] = useApi(getTables, 0);


    const [form] = Form.useForm();
    const handleOk = () => form.submit();
    const onFinish = async (values: CategoryProps) => {
        submit(values, categoryId === null ? 0 : 1);
    }

    const submit = async (values: CategoryProps, type: number) => {
        let res: any = {};
        if (type === 0) {
            res = await addCategory(values);
        } else {
            res = await updateCategory({ ...values, _id: categoryId });
        }
        if (res.code !== 0) return message.error(res.msg);
        message.success("保存成功");
        setKey(key + 1);
        setShow(false);
        // 清空分类ID
        setCategoryId(null);
    }
    const deleteItem = (values: CategoryProps) => {

    }
    const editItem = (values: CategoryProps) => {
        setShow(true);
        form.setFieldsValue(values)
        setCategoryId(values._id);
    }
    return (
        <div>
            <div className='btn'>
                <Button type='primary' onClick={() => setShow(true)}>创建接口分类</Button>
            </div>
            <Table dataSource={data} >
                <Column title="接口分类名称" key="categoryName" dataIndex='categoryName' />
                <Column title="接口分类所属表" key="parentName" dataIndex='parentName' />
                <Column title="描述" key="desc" dataIndex='desc' />
                <Column title="创建时间" key="createTime" dataIndex='createTime' />
                <Column title="操作" key="action"
                    render={(text, record) => (
                        <Space size="middle">
                            <a onClick={() => deleteItem(text)}>删除</a>
                            <a onClick={() => editItem(text)}>编辑</a>
                            <a onClick={() => navigate('/home/api/index?id=' + text._id)}>接口管理</a>
                        </Space>
                    )}
                />
            </Table>

            <Modal title="创建接口分类" visible={show} onOk={handleOk} onCancel={() => setShow(false)}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="接口分类名称"
                        name="categoryName"
                        rules={[{ required: true, message: '请输入接口分类名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="接口分类所属表"
                        name="parentId"
                        rules={[{ required: true, message: '请选择接口分类所属表!' }]}
                    >
                        <Select allowClear>
                            {
                                tableList.map((item: any) => {
                                    return <Option value={item._id}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="描述"
                        name="desc"
                        rules={[{ required: true, message: '请输入描述!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}


export default ApiCategory; 
